<template>
    <div class="news">
        <div class="newsmask">
            <div class="schoolicon"></div>
            <div class="schoolname"></div>
            <div class="rect">
                <div class="wordzone">
                    <div class="title">新星熠熠熠 荷伢汲汲汲 新星熠熠熠 荷伢汲汲汲</div>
                    <div class="subtitle">——余杭区育才实验小学新荷校区即将开学啦！</div>
                    <div class="txt">在这次全国人民万众一心抗击新冠疫情的斗争中，时代先锋们用实际行动给少先队员们传递了最有力的力量，育才小学的少先队员们在这场斗争中以实际行动，展现了少年儿童良好的风貌。在“六一”国际儿童节到来之际，我校各个校区用别样的入队仪式，欢迎少年先锋队大家庭的新成员。
                                    <br/><br/>6月1日晚，荷花、映荷校区全体师生相聚在网络“云”端，共同举行庄重的少年先锋队入队仪式。
                                    <br/><br/>为了本次一年级的入队仪式，少先队大队部开展了丰富的少先队
                    </div>
                </div>
            </div>
            <div class="contentbox">
                <Imgbox :imgList="imgList" :selectimg="selectimg" :boxmode="boxmode"></Imgbox>
                <div class="dotbox">
                    <div class="zone clearfix">
                        <div class="dot" v-for="(item,index) in imgList" :key="index" :class="[{'chose':index==selectimg}]"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            imgList:
            [
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599812981439&di=45ca138ed0ec74e54950ce01e9dedec3&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813079176&di=f344050c0a996e85c67c42405babb99d&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Frushidao%2Fpics%2Fhv1%2F20%2F108%2F1744%2F113431160.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813107237&di=9a599dcfa137d99d9ef74828b7f72434&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813125818&di=97ca805654d9111559c01c6092a56da4&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813140645&di=00e0e27323b8c9fc1f4fc9dc29093608&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg"
            ],
            timer:null,
            selectimg:0, //当前展示的图片下标
            boxmode:2, //1有边框 2无边框
        }
    },
    mounted(){
        this.changeImg()
    },
    methods:{
        //2s切换一次图片
        changeImg(){
            this.timer=setInterval(()=>{
                this.selectimg=(this.selectimg+1)%this.imgList.length
            },2000)
        }
    },
    destroyed(){
        clearInterval(this.timer)
        this.timer=null
    },
}
</script>

<style lang="scss" scoped>
.news{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(~@/assets/img/bigscreen/newsbg.png) no-repeat;
    background-size: 100% 100%;
    .newsmask{
        width: 100%;
        height: 100%;
        background: url(~@/assets/img/bigscreen/tree.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .schoolicon{
            position: absolute;
            top: 2.24rem;
            left: .93rem;
            width: .5rem;
            height: .63rem;
            background: url(~@/assets/img/bigscreen/logo.png) no-repeat;
            background-size: 100% 100%;
        }
        .schoolname{
            position: absolute;
            top: 2.39rem;
            left: 1.58rem;
            width: 3.99rem;
            height: .48rem;
            background: url(~@/assets/img/bigscreen/schoolname.png) no-repeat;
            background-size: 100% 100%;
        }
        .rect{
            width: 11.43rem;
            height: 11.92rem;
            position: absolute;
            right: 0;
            top: .44rem;
            background: url(~@/assets/img/bigscreen/leaf.png) no-repeat;
            background-size: 100% 100%;
            padding: 1.99rem 0 .46rem 2.91rem;
            .wordzone{
                width: 7.37rem;
                height: 9.47rem;
                position: relative;
                color: #333333;
                .title{
                    font-size: .64rem;
                    font-weight: bold;
                    width: 7.1rem;
                    height: auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                }
                .subtitle{
                    font-size: .3rem;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-top: .3rem;
                }
                .txt{
                    padding-top: .65rem;
                    font-size: .26rem;
                    line-height: .5rem;
                    height: 5.7rem;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
        .contentbox{
            width: 9rem;
            height: 6.01rem;
            left: .91rem;
            top: 3.4rem;
            position: absolute;
            .dotbox{
                position: absolute;
                bottom: .19rem;
                left: 50%;
                transform: translateX(-50%);
                height: .4rem;
                width: auto;
                border-radius: .2rem;
                background: rgba($color: #000000, $alpha: .2);
                z-index: 101;
                .zone{
                    padding: 0 .2rem;
                    .dot{
                        background: #dcdad4;
                        width: .1rem;
                        height: .1rem;
                        border-radius: .05rem .05rem;
                        margin: .15rem .0675rem;
                        float: left;
                        &.chose{
                            background: #f6f6f5;
                            width: .4rem;
                            height: .12rem;
                            border-radius: .06rem .06rem;
                            margin: .14rem .0675rem;
                            float: left;
                        }
                    }
                }
            }
        }
    }
}
</style>
